<template>
  <div class="roleManger-container">
    <div class="manger-title">角色管理</div>
    <el-button type="success" @click="add()"> 添加</el-button>
    <el-table :data="roleArr" style="width: 100%">
      <el-table-column align="center" type="index" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="name" label="角色名称" width="360">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="view(scope.row)"> 查看</el-button>
          <el-button type="primary" plain @click="edit(scope.row)">
            修改</el-button
          >
          <el-button type="danger" @click="delete scope.row"> 删除</el-button>
          <el-button type="warning" plain @click="mangerUser(scope.row)">
            用户管理</el-button
          >
          <el-button type="warning" plain @click="mangerMenu(scope.row)">
            菜单管理</el-button
          >
          <el-button type="warning" plain @click="mangerClient(scope.row)">
            客户端管理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
      ></el-pagination>
    </div>
    <el-dialog title="用户管理" :visible.sync="dialogFormVisible">
      <el-select
        v-model="selectedUserIds"
        class="user-select"
        value-key="id"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="选择用户"
      >
        <el-option
          v-for="item in allUserList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div class="user-save-container">
        <el-button @click="saveRoleUser" type="primary" plain>保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="菜单管理" :visible.sync="menuDialogFormVisible">
      <el-tree
        :props="defaultProps"
        :load="loadNode"
        :data="menuTreeList"
        :default-expanded-keys="defaultExpandedKeys"
        show-checkbox
        node-key="id"
        ref="menuTree"
        @check-change="handleCheckChange"
      >
      </el-tree>
      <div class="menu-save-container">
        <el-button
          @click="saveRoleMenu"
          type="primary"
          plain
          class="menu-save-button"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="客户端管理" :visible.sync="clientDialogFormVisible">
      <el-select
        v-model="selectedClientIds"
        class="user-select"
        value-key="id"
        multiple
        filterable
        allow-create
        default-first-option
        placeholder="选择客户端"
      >
        <el-option
          v-for="item in allClientList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <div class="user-save-container">
        <el-button @click="saveRoleClient" type="primary" plain>保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { QueryRole, DeleteRole } from "../api/Role";
import { GetUserList, UpdateRoleUser } from "../api/RoleUser";
import { UpdateRoleMenu } from "../api/RoleMenu";
import {
  Table,
  TableColumn,
  Button,
  Dialog,
  Select,
  Option,
  Tree,
  Pagination,
} from "element-ui";

import { GetMenuList } from "../api/RoleMenu";
import { QueryUser } from "../api/User";
import { GetMenuTree } from "../api/Menu";
import { GetClientList, UpdateClientRole } from "../api/Roleclient";
import { QueryClient } from "../api/Client";

export default {
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Select.name]: Select,
    [Option.name]: Option,
    [Tree.name]: Tree,
    [Pagination.name]: Pagination,
  },
  data() {
    return {
      roleArr: [],
      dialogFormVisible: false,
      menuDialogFormVisible: false,
      clientDialogFormVisible: false,
      allUserList: [],
      allClientList: [],
      selectedUserIds: [],
      selectedClientIds: [],
      selectedMenuIds: [],
      selectedRoleId: "",
      menuTreeList: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      currentPage: 1,
      total: 5,
      pageSize: 5,
      defaultExpandedKeys: ["m1"],
    };
  },
  mounted() {
    this.init();
  },
  created() {
    this.getRole();
  },

  methods: {
    init() {
      this.queryRole();
      QueryUser().then((result) => {
        this.allUserList = result.data;
      });
      QueryClient("").then((result) => {
        this.allClientList = result.data;
      });
    },
    queryRole(pageIndex, pageSize) {
      QueryRole(pageIndex, pageSize).then((result) => {
        this.roleArr = result.data;
        this.total = result.total;
      });
    },
    edit(row) {
      console.log("Edit", row);
      this.$router.push({
        path: `/Home/RoleItem/${row.id}/edit`,
      });
    },
    delete(row) {
      console.log("Delete", row);
      var _this = this;
      DeleteRole(row).then(() => {
        _this.GetRole();
      });
    },
    mangerUser(row) {
      this.getRoleUserList(row.id);
      this.selectedRoleId = row.id;
      this.dialogFormVisible = true;
    },
    mangerMenu(row) {
      this.selectedRoleId = row.id;
      GetMenuTree().then((result) => {
        this.menuTreeList = result.data;
        this.getRoleMenuList(row.id);
        this.menuDialogFormVisible = true;
      });
    },
    mangerClient(row) {
      this.getRoleClientList(row.id);
      this.selectedRoleId = row.id;
      this.clientDialogFormVisible = true;
    },
    view(row) {
      console.log("View", row);
      this.$router.push({
        path: `/Home/RoleItem/${row.id}/view`,
      });
    },
    add() {
      console.log("Add");
      this.$router.push({
        path: `/Home/RoleItem/${"-"}/add`,
      });
    },
    getRoleUserList(roleId) {
      GetUserList(roleId).then((result) => {
        var _ids = [];
        result.data.map((item) => {
          _ids.push(item.id);
        });
        this.selectedUserIds = _ids;
      });
    },
    getRoleMenuList(roleId) {
      var _this = this;
      GetMenuList(roleId).then((result) => {
        var _ids = [];
        result.data.map((item) => {
          _ids.push(item.id);
        });

        _this.$refs.menuTree.setCheckedKeys(_ids);
      });
    },
    getRoleClientList(roleId) {
      GetClientList(roleId).then((result) => {
        var _ids = [];
        result.data.map((item) => {
          _ids.push(item.id);
        });
        this.selectedClientIds = _ids;
      });
    },
    saveRoleUser() {
      UpdateRoleUser(this.selectedRoleId, this.selectedUserIds);
      this.dialogFormVisible = false;
    },
    saveRoleClient() {
      UpdateClientRole(this.selectedRoleId, this.selectedClientIds);
    },
    saveRoleMenu() {
      let _selectedMenuIds = this.$refs.menuTree.getCheckedKeys();
      UpdateRoleMenu(this.selectedRoleId, _selectedMenuIds);
      this.menuDialogFormVisible = false;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.queryRole(val, this.pageSize);
    },
  },
};
</script>

<style>
.manger-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.roleManger-container {
  padding: 20px;
}
.menu-save-container {
  text-align: right;
}
.user-save-container {
  margin-top: 30px;
  text-align: right;
}
.user-select {
  width: 80%;
}
</style>
